<template>
<view class="selectBtn" @click="show = true">{{currentMonth||"请选择年月"}}</view>
<!-- 展示当月的统计数据 -->
<u-alert
	:title="`当月总收款${totalCollect}元，总支出${totaFees}元，总利润${totalProfit}元`"  
	type="warning" 
	center
	description=""
></u-alert>
<!-- <view>当月总收款{{totalCollect}}元，总支出{{totaFees}}元，总利润{{totalProfit}}元</view> -->
<view class="page1">
	<!-- 展示选择的月份下每天的结算记录 -->
	<view class="panel" v-for="item in list" @click="goTo('/pagesub/history/detail?path='+item.path)">
		<view class="row">
			<view>日期：{{item.date}}</view>
			<view class="profit">利润：{{item.totalProfit}}</view>
		</view>
		<view class="row">
			<view class="collect">收款：{{item.totalCollect}}</view>
			<view class="fees">支出：{{item.totaFees}}</view>
		</view>
		<!-- <up-button class="btn" type="primary" icon="file-text" text="查看详情"></up-button> -->
	</view>
	<u-empty v-if="list.length===0" mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
</view>
<!-- 日期选择器 -->
<u-datetime-picker
	:show="show"
	v-model="timestamp"
	mode="year-month"
	:maxDate="nowtmp"
	@confirm="confirmHandle"
	@cancel="show = false"
></u-datetime-picker>
</template>

<script setup>
import { onShow, onUnload } from '@dcloudio/uni-app'
import { getJsonData, getDirAllfiles } from '@/utils/file'
import { goTo } from '@/utils/helper'
import dayjs from 'dayjs'

const nowtmp = Date.now();
const show = ref(false);
const timestamp = ref(nowtmp);
const list = ref([])
const totalCollect = ref(0)
const totaFees = ref(0)
const totalProfit = ref(0)
const currentMonth = ref('')

function confirmHandle(e){
	const nowMonth = dayjs(e.value).format('YYYY-MM')
	// 读取本地APP, doc/_history/2024-02目录下的文件
	const dir = '_doc/_history/'+ nowMonth + '/'
	show.value = false
	currentMonth.value = nowMonth
	getDirAllfiles(dir, async(entrire) => {
		let collect = 0, fees = 0;
		let arr = []
		for(let item of entrire){
			const path = dir + item.name
			const res = await getJsonData(path)
			collect += Number(res.totalCollect)
			fees += Number(res.totaFees)
			arr.push({
				date: nowMonth+'-'+item.name.replace('.json',''),
				totalCollect: res.totalCollect,
				totaFees: res.totaFees,
				totalProfit: res.totalProfit,
				path,
			})
		}
		// 将数据更新到页面上
		list.value = arr
		totalCollect.value = collect
		totaFees.value = fees
		totalProfit.value = (collect - fees)
	},()=>{
		// 错误或者没查到清空当前的数据
		list.value = []
		totalCollect.value = 0
		totaFees.value = 0
		totalProfit.value = 0
	})
}

onShow(()=> {
	if(list.value.length>0){
		// 刷新数据
		confirmHandle(timestamp)
	}
})
</script>

<style lang="scss" scoped>
.selectBtn{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
}
.panel{
	width: 710rpx;
	min-height: 100rpx;
	background-color: #fff;
	box-shadow: 0 0 10rpx #ccc;
	border-radius: 10rpx;
	padding: 20rpx;
	margin: 20rpx auto;
	.row{
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
	}
	.collect{
		color: #3c9cff;
	}
	.profit{
		color: #5ac725;
	}
	.fees{
		color: #f56c6c;
	}
}
</style>